<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
export default {
    name: "distribution",
    mixins: [mixinDevice],
    props: {
        // 父组件传递过来的值
        areaCode: {
            type: String,
            default: ''
        },
        areaLevel: {
            type: String,
            default: ''
        }
    },
  data() {
    return {
      customerData: [],
    }
  },
    watch: {
        // 如果 `areaCode` 发生改变，这个函数就会运行
        areaCode: function(newValue, oldValue) {
            this.getStatisticsData()
        },
    },
  mounted() {
    // this.getEchartRight2();
    this.getStatisticsData();
  },
  methods: {
      // 发送请求，获取数据
    async getStatisticsData() {
        let params = {
            areaCode: this.areaCode,
            areaLevel: this.areaLevel
        }
        let res = await getAction('/hc/Statistical/InfusionBottleInRight',params)
        // let url = '/bigscreen/statistics/findCustomerStatiscsByArea'
        // getAction( `${window._CONFIG['domianURL']}${url}`).then((res) => {
        //     for (let i = 0; i < res.result.length; i++) {
        //       this.customerData.push({
        //         value: res.result[i].customerSum,
        //         name: res.result[i].area,})
        //     }
        //     this.getEchartRight2();
        // })
        if (res && res.success) {
            let data = res.result || [];
            let list = data.map(item=>{
                return{
                    name: item.area,
                    value: item.customerCount,
                }
            })
            this.customerData = list
            this.getEchartRight2();
        }
      },

    getEchartRight2() {
      let myChart = this.$echarts.init(document.getElementById('chart_right2'));
      // let option = {
      //   color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{b} : {c} ({d}%)'
      //   },
      //   polar: {},
      //   angleAxis: {
      //     interval: 1,
      //     type: 'category',
      //     data: [],
      //     z: 10,
      //     axisLine: {
      //       show: false,
      //       lineStyle: {
      //         color: '#0B4A6B',
      //         width: 5,
      //         type: 'solid'
      //       },
      //     },
      //     axisLabel: {
      //       interval: 0,
      //       show: true,
      //       color: '#0B4A6B',
      //       margin: 8,
      //       fontSize: 16
      //     },
      //   },
      //   radiusAxis: {
      //     min: 40,
      //     max: 120,
      //     interval: 20,
      //     axisLine: {
      //       show: false,
      //       lineStyle: {
      //         color: '#0B3E5E',
      //         width: 1,
      //         type: 'solid'
      //       },
      //     },
      //     axisLabel: {
      //       formatter: '{value} %',
      //       show: false,
      //       padding: [0, 0, 20, 0],
      //       color: '#0B3E5E',
      //       fontSize: 16
      //     },
      //     splitLine: {
      //       lineStyle: {
      //         color: '#0B3E5E',
      //         width: 2,
      //         type: "solid"
      //       }
      //     }
      //   },
      //   calculable: true,
      //   series: [{
      //     type: 'pie',
      //     radius: ['6%', '10%'],
      //     hoverAnimation: false,
      //     labelLine: {
      //       normal: {
      //         show: false,
      //         length: 30,
      //         length2: 50
      //       },
      //       emphasis: {
      //         show: false
      //       }
      //     },
      //     tooltip: {
      //       show: false
      //     },
      //     data: [{
      //       name: '',
      //       value: 0,
      //       itemStyle: {
      //         normal: {
      //           color: '#0B4A6B'
      //         }
      //       }
      //     }]
      //   }, {
      //     type: 'pie',
      //     radius: ['90%', '95%'],
      //     hoverAnimation: false,
      //     labelLine: {
      //       normal: {
      //         show: false,
      //         length: 30,
      //         length2: 50
      //       },
      //       emphasis: {
      //         show: false
      //       }
      //     },
      //     tooltip: {
      //       show: false
      //     },
      //     data: [{
      //       name: '',
      //       value: 0,
      //       itemStyle: {
      //         normal: {
      //           color: '#0B4A6B'
      //         }
      //       }
      //     }]
      //   },{
      //     stack: 'a',
      //     type: 'pie',
      //     radius: ['20%', '80%'],
      //     roseType: 'area',
      //     zlevel: 10,
      //     label: {
      //       normal: {
      //         show: true,
      //         formatter: '{b}',
      //         textStyle: {
      //           fontSize: 12,
      //         },
      //         position: 'outside'
      //       },
      //       emphasis: {
      //         show: false
      //       }
      //     },
      //     labelLine: {
      //       normal: {
      //         show: true,
      //         length: 15,
      //         length2: 50,
      //         lineStyle: {
      //           type: 'dotted'
      //         }
      //       },
      //       emphasis: {
      //         show: true
      //       }
      //     },
      //     data: this.customerData
      //   }]
      // }


        // let angle = 0;//角度，用来做简单的动画效果的
        // let value = 55.33;
        // let option1 = {
        //     color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
        //     // title: {
        //     //     text: '网络/安全设备',
        //     //     left: '60',
        //     //     top: 0,
        //     //     textAlign: 'center',
        //     //     textStyle: {
        //     //         color: '#fff',
        //     //         fontSize: 14,
        //     //         fontWeight: 0
        //     //     }
        //     // },
        //     grid: {
        //         left: -100,
        //         top: -2250,
        //         bottom: 10000,
        //         right: 10000,
        //         containLabel: true
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //         formatter: "{b} : {c} ({d}%)"
        //     },
        //     // legend: {
        //     //     type: "scroll",
        //     //     orient: "vartical",
        //     //     // x: "right",
        //     //     top: "center",
        //     //     right: "15",
        //     //     // bottom: "0%",
        //     //     itemWidth: 16,
        //     //     itemHeight: 8,
        //     //     itemGap: 16,
        //     //     textStyle: {
        //     //         color: '#A3E2F4',
        //     //         fontSize: 12,
        //     //         fontWeight: 0
        //     //     },
        //     //     data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']
        //     // },
        //     polar: {},
        //     angleAxis: {
        //         interval: 1,
        //         type: 'category',
        //         data: [],
        //         z: 10,
        //         axisLine: {
        //             show: false,
        //             lineStyle: {
        //                 color: "#0B4A6B",
        //                 width: 1,
        //                 type: "solid"
        //             },
        //             symbolSize:[10,10]
        //         },
        //         axisLabel: {
        //             interval: 0,
        //             show: true,
        //             color: "#0B4A6B",
        //             margin: 8,
        //             fontSize: 16
        //         },
        //     },
        //     radiusAxis: {
        //         boundaryGap : true,
        //         radius: ["70%", "75%"],
        //         axisLine: {
        //             show: false,
        //             lineStyle: {
        //                 color: "#0B3E5E",
        //                 width: 1,
        //                 type: "solid"
        //             },
        //             symbolSize:[10,10]
        //         },
        //         axisLabel: {
        //             formatter: '{value} %',
        //             show: false,
        //             padding: [0, 0, 20, 0],
        //             color: "#0B3E5E",
        //             fontSize: 16
        //         },
        //         splitLine: {
        //             lineStyle: {
        //                 color: "#0B3E5E",
        //                 width: 2,
        //                 type: "solid"
        //             }
        //         }
        //     },
        //     calculable: true,
        //     series: [{
        //         name: "ring5",
        //         type: 'custom',
        //         coordinateSystem: "none",
        //         renderItem: function(params, api) {
        //             return {
        //                 type: 'arc',
        //                 shape: {
        //                     cx: api.getWidth() / 2,
        //                     cy: api.getHeight() / 2,
        //                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
        //                     startAngle: (180+angle) * Math.PI / 180,
        //                     endAngle: (270+angle) * Math.PI / 180
        //                 },
        //                 style: {
        //                     stroke: "#0CD3DB",
        //                     fill: "transparent",
        //                     lineWidth: 1.5
        //                 },
        //                 silent: true
        //             };
        //         },
        //         data: [0]
        //     }, {
        //         name: "ring5",
        //         type: 'custom',
        //         coordinateSystem: "none",
        //         renderItem: function(params, api) {
        //             return {
        //                 type: 'arc',
        //                 shape: {
        //                     cx: api.getWidth() / 2,
        //                     cy: api.getHeight() / 2,
        //                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
        //                     startAngle: (270+-angle) * Math.PI / 180,
        //                     endAngle: (40+-angle) * Math.PI / 180
        //                 },
        //                 style: {
        //                     stroke: "#0CD3DB",
        //                     fill: "transparent",
        //                     lineWidth: 1.5
        //                 },
        //                 silent: true
        //             };
        //         },
        //         data: [0]
        //     }, {
        //         name: "ring5",
        //         type: 'custom',
        //         coordinateSystem: "none",
        //         renderItem: function(params, api) {
        //             return {
        //                 type: 'arc',
        //                 shape: {
        //                     cx: api.getWidth() / 2,
        //                     cy: api.getHeight() / 2,
        //                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
        //                     startAngle: (90+-angle) * Math.PI / 180,
        //                     endAngle: (220+-angle) * Math.PI / 180
        //                 },
        //                 style: {
        //                     stroke: "#0CD3DB",
        //                     fill: "transparent",
        //                     lineWidth: 1.5
        //                 },
        //                 silent: true
        //             };
        //         },
        //         data: [0]
        //     }, {
        //         name: "ring5",
        //         type: 'custom',
        //         coordinateSystem: "none",
        //         renderItem: function(params, api) {
        //             let x0 = api.getWidth() / 2;
        //             let y0 = api.getHeight() / 2;
        //             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
        //             let point = getCirlPoint(x0, y0, r, (90+-angle))
        //             return {
        //                 type: 'circle',
        //                 shape: {
        //                     cx: point.x,
        //                     cy: point.y,
        //                     r: 4
        //                 },
        //                 style: {
        //                     stroke: "#0CD3DB",//粉
        //                     fill: "#0CD3DB"
        //                 },
        //                 silent: true
        //             };
        //         },
        //         data: [0]
        //     }, {
        //         name: "ring5",  //绿点
        //         type: 'custom',
        //         coordinateSystem: "none",
        //         renderItem: function(params, api) {
        //             let x0 = api.getWidth() / 2;
        //             let y0 = api.getHeight() / 2;
        //             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
        //             let point = getCirlPoint(x0, y0, r, (270+-angle))
        //             return {
        //                 type: 'circle',
        //                 shape: {
        //                     cx: point.x,
        //                     cy: point.y,
        //                     r: 4
        //                 },
        //                 style: {
        //                     stroke: "#0CD3DB",      //绿
        //                     fill: "#0CD3DB"
        //                 },
        //                 silent: true
        //             };
        //         },
        //         data: [0]
        //     },{
        //         type: 'pie',
        //         radius: ["5%", "10%"],
        //         hoverAnimation: false,
        //         id:40,
        //         labelLine: {
        //             normal: {
        //                 show: false,
        //                 length: 30,
        //                 length2: 55
        //             },
        //             emphasis: {
        //                 show: false
        //             }
        //         },
        //         data: [{
        //             name: '',
        //             value: 0,
        //             itemStyle: {
        //                 normal: {
        //                     color: "#0B4A6B"
        //                 }
        //             }
        //         }]
        //     }, {
        //         type: 'pie',
        //         radius: ["70%", "75%"],
        //         hoverAnimation: false,
        //         id:30,
        //         labelLine: {
        //             normal: {
        //                 show: false,
        //                 length: 30,
        //                 length2: 55
        //             },
        //             emphasis: {
        //                 show: false
        //             }
        //         },
        //         name: "",
        //         data: [{
        //             name: '',
        //             value: 0,
        //             itemStyle: {
        //                 normal: {
        //                     color: "#0B4A6B"
        //                 }
        //             }
        //         }]
        //     },{
        //         stack: 'a',
        //         type: 'pie',
        //         radius: ['20%', '60%'],
        //         roseType: 'area',
        //         zlevel:10,
        //         id:50,
        //         label: {
        //             normal: {
        //                 show: true,
        //                 formatter: "{c}",
        //                 textStyle: {
        //                     fontSize: 12,
        //                 },
        //                 position: 'outside'
        //             },
        //             emphasis: {
        //                 show: true
        //             }
        //         },
        //         labelLine: {
        //             normal: {
        //                 show: true,
        //                 length: 20,
        //                 length2: 55
        //             },
        //             emphasis: {
        //                 show: false
        //             }
        //         },
        //         data: [
        //             {
        //                 value: 10,
        //                 name: 'IDS'
        //             },
        //             {
        //                 value: 50,
        //                 name: 'VPN'
        //             },
        //             {
        //                 value: 15,
        //                 name: '交换机'
        //             },
        //             {
        //                 value: 25,
        //                 name: '防火墙'
        //             },
        //             {
        //                 value: 20,
        //                 name: 'WAF'
        //             },
        //             {
        //                 value: 350,
        //                 name: '堡垒机'
        //             }
        //         ]
        //     }, ]
        // }
        //
        //
        // //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
        // function getCirlPoint(x0, y0, r, angle) {
        //     let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        //     let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        //     return {
        //         x: x1,
        //         y: y1
        //     }
        // }
        //
        // function draw(){
        //     angle = angle+3
        //     myChart.setOption(option1, true)
        //     //window.requestAnimationFrame(draw);
        // }
        //
        // setInterval(function() {
        //     //用setInterval做动画感觉有问题
        //     draw()
        // }, 300);
        let option = {
            color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
            grid: {
                left: -100,
                top: 50,
                bottom: 10,
                right: 10,
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            // legend: {
            //     type: "scroll",
            //     orient: "vartical",
            //     // x: "right",
            //     top: "center",
            //     right: "15",
            //     // bottom: "0%",
            //     itemWidth: 16,
            //     itemHeight: 8,
            //     itemGap: 16,
            //     textStyle: {
            //         color: '#A3E2F4',
            //         fontSize: 12,
            //         fontWeight: 0
            //     },
            //     data: ['IDS', 'VPN', '交换机', '防火墙', 'WAF', '堡垒机']
            // },
            polar: {},
            angleAxis: {
                interval: 1,
                type: 'category',
                data: [],
                z: 10,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#0B4A6B",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    color: "#0B4A6B",
                    margin: 8,
                    fontSize: 16
                },
            },
            radiusAxis: {
                min: 40,
                max: 120,
                interval: 20,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#0B3E5E",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    formatter: '{value} %',
                    show: false,
                    padding: [0, 0, 20, 0],
                    color: "#0B3E5E",
                    fontSize: 16
                },
                splitLine: {
                    lineStyle: {
                        color: "#0B3E5E",
                        width: 0,
                        type: "solid"
                    }
                }
            },
            calculable: true,
            series: [
                {
                    type: 'pie',
                    radius: ["5%", "10%"],
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#0B4A6B"
                            }
                        }
                    }]
                },
                {
                    type: 'pie',
                    // zlevel: 2,
                    silent: true,
                    radius: ['80%', '79%'],
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: _pie3()
                },
                {
                    type: 'pie',
                    // zlevel: 2,
                    silent: true,
                    radius: ['63%', '62%'],
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: _pie3()
                },
                {
                    type: 'pie',
                    radius: ["90%", "95%"],
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    name: "",
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#0B4A6B"
                            }
                        }
                    }]
                },
                {
                    stack: 'a',
                    type: 'pie',
                    radius: ['20%', '80%'],
                    roseType: 'area',
                    zlevel:10,
                    label: {
                        normal: {
                            show: true,
                            formatter: (params) => {
                                if(params.data != ''){
                                    return params.data.name + ': ' + params.data.value + '家'
                                }else {
                                    return ''
                                }
                            },
                            textStyle: {
                                fontSize: 12,
                            },
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 20
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: this.customerData
                },
            ]
        }

        myChart.on('mouseover', function(params) {
            stopTimer();
        });

        myChart.on('mouseout', function(params) {
            startTimer();
        });


        let timer;

        function doing() {
            let option = myChart.getOption();
            option.series[1].startAngle = option.series[1].startAngle - 1;
            option.series[2].startAngle = option.series[2].startAngle + 1;
            // option.series[6].data[0].value = option.series[6].data[0].value + 1;
            myChart.setOption(option);

        }

        function startTimer() {

            timer = setInterval(doing, 100);

        }

        function stopTimer() {

            clearInterval(timer);

            let xzTimer = null;

        }

        setTimeout(startTimer, 500);

        function _pie3() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "rgb(126,190,255)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }

            }
            return dataArr
        }

        myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="less" scoped>
.distribution-container {
  .chart {
    height: 3rem;
  }
}
</style>
